<template>
  <div class="app-container" style="height: 100%">
    <div
      v-loading="loading"
      class="app-container-inner"
      style="display: flex; flex-direction: column"
      element-loading-text="加载中..."
    >
      <div class="header flex-justify-end">
        <!-- 搜索条件控件 -->
        <div class="search">
          <!-- 日期范围 -->
          <DateRange ref="dateRangeRef" @change="handleDateChange" />

          <!-- 申请人名称 -->
          <el-input
            v-model.trim="data.applyEmp"
            clearable
            placeholder="申请人名称"
            @keyup.enter.native="getfeeWork"
            @clear="getfeeWork()"
          />

          <!-- 费用单号 -->
          <el-input
            v-model.trim="data.feeNo"
            clearable
            placeholder="费用单号"
            @keyup.enter.native="getfeeWork"
            @clear="getfeeWork()"
          />

          <!-- 工单单号 -->
          <el-input
            v-model.trim="data.workNo"
            clearable
            placeholder="工单单号"
            @keyup.enter.native="getfeeWork()"
            @clear="getfeeWork()"
          />

          <!-- 状态 -->
          <el-select
            v-model="data.status"
            placeholder="状态"
            filterable
            clearable
            @change="getfeeWork"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :value="item.value"
              :label="item.name"
            />
          </el-select>

          <!-- 按钮组 -->
          <div class="btn-group">
            <button class="btn btn-bg1 mr5" @click="getfeeWork">
              <el-icon class="mr5">
                <Search />
              </el-icon>
              <span>搜索</span>
            </button>

            <button class="btn btn-bg5" @click="onReset">
              <el-icon class="mr5">
                <RefreshRight />
              </el-icon>
              <span>重置</span>
            </button>
          </div>
        </div>
      </div>
      <div ref="tableHeightRef" class="table-ele" style="flex: 1; position: relative">
        <el-table
          :border="true"
          stripe
          height="100%"
          style="position: absolute"
          resizable
          :data="tableDataList"
        >
          <template #empty>
            <el-empty description="暂无数据" />
          </template>
          <!-- 序号 -->
          <el-table-column
            show-overflow-tooltip
            label="序号"
            type="index"
            fixed="left"
            width="50"
          />

          <!-- 费用单号 -->
          <el-table-column
            show-overflow-tooltip
            fixed="left"
            prop="feeNo"
            label="费用单号"
            min-width="160"
          >
            <template #default="scope">
              <span class="number" @click="viewDetail(scope.row.id)">{{ scope.row.feeNo }}</span>
            </template>
          </el-table-column>

          <!-- 工单单号 -->
          <el-table-column show-overflow-tooltip prop="workNo" label="工单单号" width="160">
            <template #default="scope">
              <span class="number" @click="goOrder(scope.row.workId)">{{ scope.row.workNo }}</span>
            </template>
          </el-table-column>

          <!-- 状态 -->
          <el-table-column prop="state" label="状态" width="82">
            <template #default="scope">
              <el-tag v-if="scope.row.status == 1" type="warning">待审核</el-tag>
              <el-tag v-if="scope.row.status == 2">已通过</el-tag>
              <el-tag v-if="scope.row.status == 3" type="warning">已驳回</el-tag>
              <el-tag v-if="scope.row.status == 4" type="info">已撒回</el-tag>
              <el-tag v-if="scope.row.status == 5" type="info">已取消</el-tag>
            </template>
          </el-table-column>

          <!-- 结算类型 -->
          <el-table-column
            show-overflow-tooltip
            prop="settlementType"
            label="结算类型"
            width="100"
          />

          <!-- 项目费用名称 -->
          <el-table-column
            show-overflow-tooltip
            prop="feeProject"
            label="项目费用名称"
            width="100"
          />

          <!-- 申请总金额 -->
          <el-table-column show-overflow-tooltip prop="applyFee" label="申请总金额" width="90">
            <template #default="i"> ￥{{ i.row.applyFee }} </template>
          </el-table-column>

          <!-- 审批总金额 -->
          <el-table-column show-overflow-tooltip prop="checkFee" label="审批总金额" width="90">
            <template #default="i"> ￥{{ i.row.checkFee }} </template>
          </el-table-column>

          <!-- 申请人员 -->
          <el-table-column show-overflow-tooltip prop="applyEmp" label="申请人员" min-width="120" />

          <!-- 审核人员 -->
          <el-table-column
            show-overflow-tooltip
            prop="reviewEmp"
            label="审核人员"
            min-width="120"
          />

          <!-- 申请网点 -->
          <el-table-column show-overflow-tooltip prop="network" label="申请网点" width="150" />

          <!-- 申请时间 -->
          <el-table-column show-overflow-tooltip prop="createTime" label="申请时间" width="128" />

          <!-- 审核时间 -->
          <el-table-column show-overflow-tooltip prop="reviewTime" label="	审核时间" width="128" />

          <!-- 操作 -->
          <el-table-column fixed="right" label="操作" width="60">
            <template #default="scope">
              <span v-if="scope.row.status == 1" class="waiting_x" @click="viewCheck(scope.row)"
                >审核</span
              >
              <span v-else class="waiting_pass">审核</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="footer">
        <Pagination
          ref="pagination"
          :list_total="total"
          @size-change="getfeeWork"
          @current-change="getfeeWork"
        />
      </div>
      <!-- 费用审核弹出框 -->
      <CheckCost
        v-if="checkDialog"
        :fee-no="feeNo"
        :work-no="workNo"
        :check-dialog="checkDialog"
        :fee-id="feeId"
        @assign-dialog="checkDialog = false"
        @update-list="getfeeWork()"
      />

      <!-- 查看详细弹出框 -->
      <CostDetail
        v-if="detailDialog"
        :fee-id="feeId"
        :check-dialog="detailDialog"
        @assign-dialog="detailDialog = false"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
  import Pagination from '@/components/Pagination/index.vue'
  import { ref, onMounted, reactive, watch } from 'vue'
  import { Search, RefreshRight } from '@element-plus/icons-vue'
  import { useRoute, useRouter } from 'vue-router'
  import { ElMessage } from 'element-plus'
  import { feeWork } from '../../../api/order'
  import CheckCost from './components/CheckCost.vue'
  import CostDetail from './components/CostDetail.vue'
  import DateRange from '@/components/DateRange.vue'

  const router = useRouter()
  const route = useRoute()
  const loading = ref(false)
  const pagination = ref()
  const total = ref(0)
  let tableDataList = ref(null)
  const checkDialog = ref(false)
  const detailDialog = ref(false)

  let data = reactive({
    applyEmp: '', //	申请人名称，支持模糊查询
    createEndTime: '', //申请结束时间
    createStartTime: '', //申请开始时间
    feeNo: '', //费用单号，支持模糊查询
    limit: 50,
    page: 1,
    status: null, //服务费用项目状态：1-待审核、2-已通过、3-已驳回、4-已撒回，5-已取消
    workNo: '', //工单单号，支持模糊查询
  })
  const feeId = ref(null)
  const workNo = ref(null)
  const feeNo = ref(null)

  // 开始日期
  const startDate = ref('')

  // 结束日期
  const endDate = ref('')

  // 服务费用项目状态
  const options = [
    { value: 1, name: '待审核' },
    { value: 2, name: '已通过' },
    { value: 3, name: '已驳回' },
    { value: 4, name: '已撒回' },
    { value: 5, name: '已取消' },
  ]

  // 费用审核
  const viewCheck = (n: any) => {
    checkDialog.value = true
    feeId.value = n.id
    workNo.value = n.workNo
    feeNo.value = n.feeNo
  }
  // 查看工单
  const goOrder = (n: string) => {
    router.push('/order/odetail/' + n)
  }
  // 查看费用详细
  const viewDetail = (n: number) => {
    detailDialog.value = true
    feeId.value = n
  }

  // 获取工单费用列表方法
  const getfeeWork = async () => {
    if (isStartDateGreaterThanEndDate.value) {
      ElMessage({
        type: 'error',
        message: '开始日期不能大于结束日期',
      })
      return
    }

    loading.value = true
    data.createStartTime = startDate.value ? startDate.value : ''
    data.createEndTime = endDate.value ? endDate.value : ''
    data.limit = pagination.value.size //每页显示数量
    data.page = pagination.value.current //当面页码
    await feeWork(data).then((res) => {
      if (res.data.success) {
        tableDataList.value = res.data.data.rows
        total.value = Number(res.data.data.total)
      } else {
        ElMessage({
          showClose: true,
          message: res.data.message,
          type: 'error',
          duration: 3000,
        })
      }
      loading.value = false
    })
  }

  // 日期范围组件实例
  const dateRangeRef = ref<InstanceType<typeof DateRange> | null>(null)

  // 重置事件
  const onReset = () => {
    if (dateRangeRef.value) {
      dateRangeRef.value.resetDateRange()
    }
    startDate.value = ''
    endDate.value = ''
    Object.assign(data, {
      applyEmp: '', // 申请人名称，支持模糊查询
      createEndTime: '', // 申请结束时间
      createStartTime: '', // 申请开始时间
      feeNo: '', // 费用单号，支持模糊查询
      limit: 50,
      page: 1,
      status: null, // 服务费用项目状态：1-待审核、2-已通过、3-已驳回、4-已撒回，5-已取消
      workNo: '', // 工单单号，支持模糊查询
    })
    getfeeWork()
  }

  // 开始日期是否大于结束日期
  const isStartDateGreaterThanEndDate = ref(false)

  // 日期更新事件
  const handleDateChange = (param: {
    startDate: string
    endDate: string
    isStartDateGreaterThanEndDate: boolean
  }) => {
    startDate.value = param.startDate
    endDate.value = param.endDate
    isStartDateGreaterThanEndDate.value = param.isStartDateGreaterThanEndDate
    if (param.isStartDateGreaterThanEndDate) {
      ElMessage({
        type: 'error',
        message: '开始日期不能大于结束日期',
      })
    }
  }

  // 重新进入页面时，获取最新的数据
  watch(
    () => route.name,
    (value) => {
      if (value === 'Orderocost') {
        getfeeWork()
      }
    },
  )

  onMounted(() => {
    getfeeWork()
  })
  // const tableHeight = ref(0)
  // const tableHeightRef=ref()
  // onMounted(() => {
  //   // 监听dom的变化
  //   resizeObserver.observe(tableHeightRef.value)

  // })
  // const resizeObserver = new ResizeObserver((val) => {
  //   tableHeight.value =  val[0].borderBoxSize[0].blockSize
  // })
  // onBeforeUnmount(() => {
  //   resizeObserver.disconnect()
  // })
</script>

<style scoped lang="scss">
  @import './index';
</style>
